<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cisau信院免费邮--校园邮箱第一品牌</title>
<link rel="shortcut icon" href="<%=basePath %>images/favicon.ico" type="image/x-icon"/>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="<%=basePath %>js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/animate.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/font.css" type="text/css" />
  <link rel="stylesheet" href="<%=basePath %>css/app.css" type="text/css" />  
</head>
<script type="text/javascript" src="<%=basePath %>js/jquery.min.js"></script>


<body class="" οnlοad="selAllFriend()">
  <section class="vbox">

    <jsp:include page="top.jsp"></jsp:include>

  <!-- 添加好友表单start -->
        <section id="content">
          <section class="vbox">
            <section class="scrollable padder">
              <div class="m-b-md">
                <h3 class="m-b-none">添加好友</h3>
              </div>
              <div class="row">
                <div class="col-sm-6">
                
                <!--表单开始-->
                  <div id="wizardform">
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <ul class="nav nav-tabs font-bold">
                          <li><a href="#step1" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        </ul>
                      </div>
                      <div class="panel-body">
                        <p>请在下方输入你的好友邮箱地址以及昵称！</p>
                        <div class="line line-lg"></div>
                        
                        <div class="progress progress-xs m-t-md">
                          <div class="progress-bar bg-success"></div>
                        </div>
                         <!-- 隐藏域开始 -->
                         <input type="hidden" name="owner" value="${USER.email }" id="owner">
                          <!-- 隐藏域结束 -->
                        <div class="tab-content">
                          <div class="tab-pane" id="step1">                            
                            <p>昵称:</p>
                            <input type="text" name="nickname" id="nickname" class="form-control" data-trigger="change" data-required="true" data-type="url" placeholder="请输入好友昵称">
                            <p class="m-t">邮箱地址:</p>
                            <input type="text" class="form-control" name="friend" id="friend" data-trigger="change" data-required="true" data-type="email" placeholder="email address">
                          </div>
                          
                         
                          <ul class="pager wizard m-b-sm">
                            
                            <li style="float: right;"> <button type="button" class="btn btn-default" onclick="friendExist()">添加</button></li>
                            
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                   <!--表单结束-->
  
                </div>
                <div class="col-sm-6">
                  <div id="guessform">
                    <section class="panel panel-default">
                      <header class="panel-heading">
                        <ul class="nav nav-tabs pull-right">
                          <li><a href="#tab1" data-toggle="tab"></a></li>
                          
                        </ul>
                        <span class="font-bold">我的好友列表</span>
                      </header>

                      <div class="panel-body">
                        <div class="tab-content">
                          <div class="tab-pane text-center" id="tab1">
                 <table width="100%" border="1" class="list-group no-bg no-borders auto m-t-n-xxs">
    		<tr>
    			<td  width="5%">
    				头像
    			</td>
    			<td width="10%" style="float: left; margin-left: 23px;">
    				昵称
    			</td>
    			<td  width="10%" style="float: right;">
    				加入黑名单
    			</td>
    			<td  width="30%" style="float: right; ">
    				操作
    			</td>
    			
    		</tr>
    	</table> 
         <table width="100%" border="1" class="list-group no-bg no-borders auto m-t-n-xxs" id="myFriendList">
         
         </table>         
                  
                  
                  
                          
                  
                            
                  </div>



                          <div class="tab-pane text-center wrapper-xl" id="tab2">
                            <h1 class="text-danger m-b-xl" id="answer"></h1>
                            <h2 class="text-success m-b-xl">Correct!!</h2>
                            <p class="h4">You guess <span id="count"></span> time(s), [<span id="num"></span> ]</p>
                          </div>
                        </div>
                      </div>
                      <footer class="panel-footer text-right bg-light lter">
                        
                      </footer>
                    </section>
                  </div>
                </div>
              </div>              
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
        <!-- 添加好友表单end -->


      </section>
    </section>    
  </section>

<script src="<%=basePath %>js/wizard/jquery.bootstrap.wizard.js"></script>
<script src="<%=basePath %>js/wizard/demo.js"></script>
  <script src="<%=basePath %>js/app.plugin.js"></script>
  <script type="text/javascript" src="<%=basePath %>js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="<%=basePath %>js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="<%=basePath %>js/jPlayer/demo.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
	selAllFriend();
});
	function selAllFriend(){
		debugger;
		var oval=document.getElementById("owner").value;
		var l = document.getElementById("myFriendList");
		l.innerHTML='';
		$.ajax( {
						url:'<%=basePath%>friend/findAllFriend',
						type:'post',
						data: {
							myEmail:oval
						},
						datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
						success : function(data) {
							var json=eval('(' + data + ')');
							$.each(json, function (n, item) {
								
								addFriends(n,item);
							});
						},
						error : function() {
			                alert("异常！！！");
			                selAllFriend();	
			            }
				});
	}
	function addFriends(n,item){
		
		
		var val = "<tr align=\"center\" height=\"50px\" style=\"padding-top: 20px;\">"+
		"<td  width=\"4%\">"+
		"<span class=\"pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm\">";
		if(""===item.picpath){
			val = val+"<i class=\"icon-users\" style=\"font-size:20px;margin-top:-15px;\"></i>";
		}else{
			val =val + "<img src=\"../"+item.picpath+"\" alt=\"...\" class=\"img-circle\">";
		}
            
		val =val +"<i class=\"on b-light right sm\"></i>"+
          "</span>"+	
          "</td>"+
	"<td>"+
		"<div class=\"clear\" style=\"float: left;\">"+
            "<div><a href=\"#\">"+item.nickname+"</a></div>"+
            "<small class=\"text-muted\">"+item.friend+"</small>"+
          "</div>"+
	"</td>"+
	"<td  width=\"31%\">"+
		"<button onclick=\"delFriend("+item.id+")\" class=\"btn btn-default\">删除</button>"+
        "<a href=\"../friend/toEdit?id="+item.id+"&nickname="+item.nickname+"&friend="+item.friend+"\" class=\"btn btn-success\" data-toggle=\"modal\">编辑</a>"+
	"</td>"+
	"<td><a href=\"javascript:addToBlackList('"+item.id+"','"+item.flag+"');\"><i class=\"icon-user-unfollow\"></i></a></td>"+
"</tr>";
		
		
		$("#myFriendList").append(val);
	}
	function addFriend(){
		debugger;
		var oval=document.getElementById("owner").value;
		var fval=document.getElementById("friend").value;
		var nval=document.getElementById("nickname").value;
		
		
		document.getElementById("friend").value="";
		document.getElementById("nickname").value="";
		$.ajax( {
			url:'<%=basePath%>friend/addfriend',
			type:'post',
			data: {
				owner:oval,
				friend:fval,
				nickname:nval
			},
			datatype : "text",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				alert("信息添加成功！");
				selAllFriend();		
			},
			 error : function() {
                 alert("异常！");
                 selAllFriend();	
             }
		});
	}
	
	
	
	
	function delFriend(ele){
		
		var flag=confirm("确认删除信息？");
		if(!flag){
			return false;
		}
		$.ajax( {
			url:'<%=basePath%>friend/delfriend',
			type:'post',
			data: {
				id:ele			
			},
			datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				
				selAllFriend();	
			},
			error : function() {
                alert("删除异常！");
                selAllFriend();	
            }
		});
	}
	function friendExist(){
		
		var ffval=document.getElementById("friend").value;
		var oval=document.getElementById("owner").value;
		if(ffval===oval){
			alert("不能添加自己为好友！");
			return false;
		}
		$.ajax( {
			url:'<%=basePath%>friend/friendExist',
			type:'post',
			data: {
				email:ffval			
			},
			datatype : "text",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				
	
					if(data==='404'){
						alert("该邮箱不存在！");
						throw SyntaxError();
					}else if(data==='400'){
						alert("该好友已存在！");
						throw SyntaxError();
						
					}else{
						addFriend();
					}
				
				
			},
			error : function() {
                alert("异常！");
                selAllFriend();	
            }
		});
	}
	
	function toEdit(id,nickname,friend){
		
		
		
		
		$.ajax( {
			url:'<%=basePath%>friend/toEdit',
			type:'post',
			data: {
				id:id,
				nickname:nickname,
				friend:friend
			}
		});
	}
	function addToBlackList(id,flag){
		debugger;

		$.ajax( {
			url:'<%=basePath%>friend/editBlackList',
			type:'post',
			data: {
				id:id,
				flag:flag
			},
			datatype : "text",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				
				selAllFriend();	
			},
			 error : function() {
                 alert("异常！");
                 selAllFriend();
             }
		});
	}
	
</script>